import * as React from 'react';
import { Card, Icon, Empty } from 'antd';

import './index.less';

interface InfoCardProps {
    loading: boolean,
    title: string,
    num: number | string,
    compareNum?: number,
    style?: Object,
    fixedNum?: number,
    bordered?: boolean
}

export default function InfoCard(props: InfoCardProps) {

    let { loading, title, num, compareNum, style, fixedNum = 2, bordered = false } = props;
    const getIcon = value => {
        let color = '#F74556';
        let type = 'caret-up';
        if (value < 0) {
            color = '#1890ff';
            type = 'caret-down';
        }
        return <Icon type={type} theme="filled" style={{
            marginLeft: 3,
            fontSize: 20,
            color: color
        }} />
    }

    if (typeof num === 'number' && !isNaN(num)) {
        num = num.toFixed(fixedNum);
    }

    return <div className="info-card">
        <Card
            bordered={bordered}
            hoverable
            style={style || {
                minWidth: 200,
                width: 'fit-content',
                marginRight: 50,
                marginBottom: 10,
                padding: '0px 10px'
            }}
            loading={loading}
        >
            {num ?
                <React.Fragment>
                    <div className="card-title">{title}</div>
                    <div className="num-wrap">
                        <span className="number">{num}</span>
                    </div>
                    {
                        compareNum !== undefined ? <div className="compare">
                            <span>日同比  {(compareNum * 100).toFixed(2) || 0}%</span>
                            {getIcon(compareNum)}
                        </div> : null
                    }
                </React.Fragment> : <Empty></Empty>}
        </Card>
    </div>
}